<template>
  <div
    class="menu-logo-box aic jcc"
    :style="{
      background: $store.state.isFull
        ? 'var(--navColorBg)'
        : $store.state.themeCurrentMenuItem.ColorBg,
    }"
  >
    <img src="/src/assets/svg/login-box-bg.svg" alt="" />
    <div
      class=""
      v-show="!isCollapse"
      :style="{
        color: $store.state.isFull
          ? 'var(--navColorFont)'
          : $store.state.navTitleColorFont,
      }"
    >
      {{ $store.state.projectName }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance } from "vue";
const internalInstance = getCurrentInstance(); //获取当前实例
const route = internalInstance?.appContext.config.globalProperties.$route;

/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
const activeIndex = ref(0);
const state = reactive({
  data: { a: 1 },
});
const handleSelect = () => {};
defineProps({
  isCollapse: {
    type: Boolean,
    required: true,
  },
});
</script>

<style scoped lang="scss">
.menu-logo-box {
  // position: absolute;
  background-color: #001529;
  height: 50px;
  overflow: hidden;

  img {
    width: 45px;
  }
  div {
    font-size: 22px;
    color: #fff;
    font-weight: bold;
    white-space: nowrap;
    margin-left: 15px;
    margin-right: 15px;
  }
}
</style>
